<template>
  <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
    <tm-text color="primary" fontSize="24">{{
      $trans("pages.register.emailPlaceholder")
    }}</tm-text>
    <tm-input
      v-model="formData.email"
      :focusHighlight="false"
      placeholder=""
      color="transparent"
      inputPadding="0"
      focusFontColor="#000001"
      cursorColor="#000001"
      class="text-weight-bold"
    ></tm-input>
  </tm-sheet>

  <tm-row column="2" justify="space-between" class="px-24 mb-24">
    <tm-text color="error">{{
      $trans("pages.register.emailInvalidText")
    }}</tm-text>
    <tm-text color="primary" @click="tipModalShow = true">{{
      $trans("pages.register.receiveCodeText")
    }}</tm-text>
  </tm-row>

  <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
    <tm-text color="primary" fontSize="24">{{
      $trans("pages.register.validCode")
    }}</tm-text>
    <tm-input
      v-model="formData.validCode"
      :focusHighlight="false"
      placeholder=""
      color="transparent"
      inputPadding="0"
      focusFontColor="#000001"
      cursorColor="#000001"
      class="text-weight-bold"
    >
      <template v-slot:rightIcon>
        <tm-button color="primary" size="s">{{
          $trans("pages.register.validCodeSend")
        }}</tm-button>
      </template>
    </tm-input>
  </tm-sheet>

  <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
    <tm-text color="primary" fontSize="24">{{
      $trans("pages.register.passwordPlaceholder")
    }}</tm-text>
    <tm-input
      v-model="formData.password"
      :focusHighlight="false"
      :password="true"
      :showEye="true"
      placeholder=""
      color="transparent"
      inputPadding="0"
      focusFontColor="#000001"
      cursorColor="#000001"
      class="text-weight-bold"
    ></tm-input>
  </tm-sheet>

  <tm-text color="error" class="px-24 mb-24">{{
    $trans("pages.register.passwordInvalidText")
  }}</tm-text>

  <tm-row class="mx-20 mt-n15">
    <tm-button block round="50" @click="onNext">{{
      $trans("pages.register.nextButton")
    }}</tm-button>
  </tm-row>
</template>

<script lang="ts" setup>
const emits = defineEmits(["next"])

const formData = reactive({
  email: "",
  validCode: "",
  password: "",
})

const onNext = () => {
  emits("next")
}

</script>

<style lang="less"></style>
